<template>
  <Top-Page class="map-box">
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      style="width: 100%; height: 100vh"
      @regionchange="regionChange"
      show-location
    ></map>
    <view
      style="
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        z-index: 10;
      "
    >
      <image src="../../static/image/friend/location.png" style="width: 100%; height: 100%" />
    </view>
    <view class="btn-box">
      <view class="btn cancel" @click.stop="navBack">取消</view>
      <view class="btn confirm" @click="confirmLocation">确定</view>
    </view>
  </Top-Page>
</template>

<script>
import { navBack } from '@/utils/utils.js';
export default {
  data() {
    return {
      navBack: navBack,
      //'../../static/image/friend/location.png'
      latitude: 39.915, // 初始纬度
      longitude: 116.404, // 初始经度
      scale: 14,
      centerLatitude: 39.915, // 地图中心点纬度
      centerLongitude: 116.404 // 地图中心点经度
    };
  },
  created() {
    this.firstApi();
  },
  methods: {
    firstApi() {
      uni.showToast({
        title: '定位中...',
        icon: 'none',
        mask: true,
        duration: 999999
      });

      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: (locationRes) => {
          uni.hideToast();
          this.latitude = locationRes.latitude;
          this.longitude = locationRes.longitude;
        },
        fail: function (err) {
          uni.hideToast();
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          });
        }
      });
    },
    // 地图视野变化时触发，获取中心点坐标
    regionChange(e) {
      if (e.type === 'end') {
        // 只在视野变化结束时获取坐标
        const mapCtx = uni.createMapContext('map');
        mapCtx.getCenterLocation({
          success: (res) => {
            this.centerLatitude = res.latitude;
            this.centerLongitude = res.longitude;
          }
        });
      }
    }, // 点击确认按钮时返回当前地图中心点的坐标
    confirmLocation() {
      uni.showModal({
        title: '确认位置',
        content: `纬度: ${this.centerLatitude}, 经度: ${this.centerLongitude}`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户确认了位置:', this.centerLatitude, this.centerLongitude);
            // 这里可以进一步处理，比如将坐标返回给上一页或进行其他操作
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.map-box {
  position: relative;
  width: 100%;
  height: 100vh;

  .btn-box {
    position: fixed;
    top: var(--status-bar-height);
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 20rpx;

    .btn {
      padding: 10rpx 20rpx;
      border-radius: 12rpx;
    }

    .cancel {
      border: 1rpx solid #3d6eff;
      color: #3d6eff;
    }
    .confirm {
      background-color: #3d6eff;
      color: #fff;
    }
  }
}
</style>
